<template>
  <div class="home">
    <div class="fix-header" :style="[{'visibility':isFixHeader?'visible':'hidden'},{'transform':isFixHeader?'translateY'+'('+0+'px'+')':''}]">
      <div class="box">
        <div class="logo">
          <h2>明日头条</h2>
        </div>
        <div class="left-menu">
          <div class="menu-item" @click="changeChannel(list,index)" :class="{'active':menuIndex===index}"
               v-for="(list,index) in menu" :key="index">
            <div class="item-text">{{list}}</div>
          </div>
          <div class="menu-item more">
            <div class="item-text" v-if="moreMenu.length">更多</div>
            <div class="more-list">
              <ul>
                <li v-for="(list,index) in moreMenu" :key="index" @click="channelMoreChannel(list,index)">{{list}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right-search">
          <div class="search-box">
            <input type="text">
            <div class="search-btn">搜索</div>
          </div>
        </div>
      </div>
    </div>
    <top/>
    <div class="main">
      <div class="left">
        <div class="left-menu">
          <div class="menu-item" @click="changeChannel(list,index)" :class="{'active':menuIndex===index}"
               v-for="(list,index) in menu" :key="index">
            <div class="item-text">{{list}}</div>
          </div>
          <div class="menu-item more">
            <div class="item-text" v-if="moreMenu.length">更多</div>
            <div class="more-list">
              <ul>
                <li v-for="(list,index) in moreMenu" :key="index" @click="channelMoreChannel(list,index)">{{list}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="left-content">
          <template v-if="list.length">
            <div class="content-item" v-for="(item,index) in list" :key="index" @click="handleClickGo2Detail(item)">
              <div class="item-left">
                <h4 class="item-title">{{item.title}}</h4>
                <div class="item-info">
                  <div class="item-info-author">{{item.src}}</div>
                  <div class="item-info-time">{{item.time}}</div>
                </div>
              </div>
              <div class="item-right">
                <img :src="item.pic" alt="">
              </div>
            </div>
          </template>
          <template v-else>
            <p style="text-align: center">加载中...</p>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <h3>头条热榜</h3>
          <div class="btn" @click="changeRankList">换一换</div>
        </div>
        <div class="right-bottom">
          <div class="bottom-item" v-for="(list,index) in rankList" :key="index">
            <span class="index" :class="{'red':index===0||index===1||index===2}">{{index+1+rankIndex*10}}</span><span
            class="title" @click="handleClickGo2Detail(list)">{{list.Title}}</span><span
            v-if="list.Label==='hot'" class="hot">热</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, Ref } from 'vue'
import { useRouter } from 'vue-router'
import Top from './components/Top.vue'
import { getChannelList, getNewsList, getRankList } from '@/api/home'
import { useChangeRankList, _getChannelList } from './useTools/useNews'

export default defineComponent({
  name: 'Home',
  components: {
    Top
  },
  setup () {
    const start: Ref<number> = ref(0) // 获取文章数量开始
    const rankList: any[] = reactive([]) // 排行榜
    const menu: any[] = reactive([]) // 菜单
    const list: any[] = reactive([]) // 新闻
    const moreMenu: any[] = reactive([])
    const channel: Ref<string> = ref('')
    const rankIndex: Ref<number> = ref(0)
    const menuIndex: Ref<number> = ref(0)
    const isFixHeader:Ref<boolean> = ref(false) // 顶部菜单显示
    const rank: any[] = []

    // 获取新闻列表
    let flag = false
    // 热搜更换
    const changeRankList = () => {
      const { useRank, useIndex } = useChangeRankList(rankIndex.value, rank)
      rankIndex.value = useIndex
      rankList.splice(0, rankList.length)
      rankList.push(...useRank)
    }
    // 点击更换频道
    const changeChannel = (name: string, index: number): void => {
      start.value = 0
      menuIndex.value = index
      channel.value = name
      methods.newsList(name, true)
    }
    // 小菜单切换
    const channelMoreChannel = (name: string, index: number): void => {
      const startNum = menu.length - 1
      const lastList = menu.slice(startNum)
      menu.splice(startNum, 1, name)
      moreMenu.splice(index, 1, ...lastList)
      changeChannel(name, startNum)
    }
    const methods = {
      // 获取新闻频道和列表
      getChannelList: () => _getChannelList().then(res => {
        const result: any[] = res as any
        menu.push(...result.slice(0, 8))
        moreMenu.push(...result.slice(8, result.length - 1))
        channel.value = result[0]
        methods.newsList(channel.value)
      }).catch(err => console.log(err)),
      // 获取热点新闻
      getRankList: () => getRankList().then(res => {
        if (res.data.status === 'success') {
          rank.push(...res.data.data)
          rankList.push(...rank.slice(0, 10))
        }
      }),
      // 滚动加载
      loadMore: () => {
        const scrollTop: number = document.documentElement.scrollTop || document.body.scrollTop
        const clientHeight: number = document.documentElement.clientHeight || document.body.clientHeight
        const scrollHeight: number = document.documentElement.scrollHeight || document.body.scrollHeight
        if (scrollTop >= 420) {
          isFixHeader.value = true
        } else {
          isFixHeader.value = false
        }
        if (scrollTop + clientHeight >= scrollHeight) {
          methods.newsList(channel.value)
        }
      },
      newsList: (channel: string, isChange = false): void => {
        if (flag) return
        flag = true
        getNewsList({
          params: {
            channel,
            num: 10,
            start: start.value
          }
        }).then(res => {
          if (res.data.code === '10000') {
            isChange && list.splice(0, list.length)
            list.push(...res.data.result.result.list)
            start.value += 1
          }
        }).finally(() => {
          flag = false
        })
      }

    }

    // 跳转到详情页面
    const handleClickGo2Detail = (item:any) => {
      // 京东接口中暂时没有获取详情，暂时先跳转到原文地址
      console.log(item)
      window.location.href = item.url || item.Url
    }
    onMounted(() => {
      methods.getRankList()
      methods.getChannelList()
      // 监听滚动事件
      addEventListener('scroll', methods.loadMore, true)
    })
    return {
      menuIndex,
      menu,
      moreMenu,
      start,
      list,
      channel,
      rankIndex,
      rankList,
      isFixHeader,
      changeRankList,
      changeChannel,
      channelMoreChannel,
      handleClickGo2Detail
    }
  }
})
</script>
<style scoped lang="scss">
  .main {
    width: 1066px;
    margin: 0 auto;
    display: flex;
    margin-top: 15px;
  }

  .left {
    width: 676px;

    .left-content {
      margin-top: 20px;

      .content-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .item-left {
          flex: 1;
          min-height: 120px;
          overflow: hidden;
          position: relative;
        }

        .item-right {
          width: 160px;
          height: 120px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s;

            &:hover {
              transform: scale(1.1);
              cursor: pointer;
            }
          }
        }
      }
    }

    .item-info {
      display: flex;
      position: absolute;
      width: 100%;
      bottom: 0;
      color: #404040;
      font-size: 15px;

      .item-info-author {
        margin-right: 15px;
      }
    }

    .item-title {
      font-size: 20px;

      &:hover {
        color: #f04142;
        cursor: pointer;
      }
    }
  }

  .right {
    margin-left: 40px;
    flex: 1;

    .right-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        cursor: pointer;
        color: #f04142;
      }
    }

    h3 {
    }

    .bottom-item {
      margin-top: 20px;
      line-height: 20px;
      cursor: pointer;

      .index {
        display: inline-block;
        width: 20px;
        text-align: center;
        font-size: 18px;
        font-style: oblique
      }

      .red {
        color: #f04142;
      }

      .title {
        margin: 0 20px;
        font-size: 16px;

        &:hover {
          color: #f04142;
        }
      }

      .hot {
        display: inline-block;
        width: 25px;
        font-size: 13px;
        background-color: #f04142;
        color: #fff;
        text-align: center;
        border-radius: 5px;
      }
    }
  }

  .left-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .menu-item {
      cursor: pointer;
      font-size: 18px;

      &:hover {
        color: #f04142;
      }

    }

    .more {
      padding: 5px 10px;
      position: relative;
      background-color: #f8f8f8;
      border-radius: 3px;

      &:hover {
        color: #000;

        .more-list {
          display: block;
        }
      }

      .more-list {
        display: none;
        position: absolute;
        right: -1px;
        top: 35px;
        border-radius: 3px;
        z-index: 200;
        padding-top: 20px;

        ul {
          box-shadow: 0 10px 50px rgba(0, 0, 0, .08);
          background-color: #fff;
          border-radius: 5px;
          padding: 20px;
          width: 350px;
          display: flex;
          flex-wrap: wrap;

          li {
            text-align: center;
            padding: 5px 10px;
            box-sizing: border-box;
            width: 25%;

            &:hover {
              background-color: #f8f8f8;
              border-radius: 3px;
            }
          }
        }
      }
    }

    .active {
      color: #f04142;
      position: relative;

      &:before {
        content: ' ';
        width: 80%;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        height: 3px;
        background-color: #f04142;
      }
    }
  }
  .fix-header{
    position: fixed;
    z-index: 999;
    width: 100%;
    background-color: #fff;
    transform: translateY(-64px);
    transition: all 0.2s;
    box-shadow: 0 10px 50px rgba(0,0,0,0.08);
    visibility: hidden;
    .logo{
      width: 110px;
      height: 36px;
      font-size: 18px;
      color: #f04142;
    }
    .box{
      width: 1334px;
      margin: 0 auto;
      display: flex;
      /*justify-content: space-between;*/
      align-items: center;
      padding:10px 0;

    }
    .left-menu{
      width: 676px;
      margin-bottom: 0;
      margin-left: 23px;
    }
    .right-search{
      flex: 1;
      margin-left: 40px;
    }
    .search-box{
      width: 100%;
      display: flex;
      input{
        flex: 1;
        height: 40px;
        border-radius: 10px;
        color: #222;
        padding:0 18px;
        background-color: #f5f5f5;
        outline: none;
        border:0;
      }
      .search-btn{
        text-align: center;
        width: 80px;
        background-color: #f04142;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-left: -10px;
        line-height: 40px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
</style>
